import { View, Text, Image, ScrollView } from '@tarojs/components'
import { AtIcon } from 'taro-ui'
import type { Record } from '../../../../../types'
import styles from './index.less'
import classNames from 'classnames'

import foodImgUrl from '@/assets/food-default.png';
import exerIconUrl from '@/assets/icon/exercise.png';
import dietconUrl from '@/assets/icon/diet.png';


interface RecordListProps {
  records: Record[]
  onStatusChange: (id: string, status: 'diet' | 'exercise') => void
}

const RecordList: React.FC<RecordListProps> = ({ records, onStatusChange }) => {
  const RecordItem = ({ record }: { record: Record }) => {
    const isExercise = record.category === '1'

    return (
      <View className={styles.recordItem}>

        <View className={styles.recordItem__contentWrapper}>
          <Image
            src={foodImgUrl}
            className={styles.recordItem__image}
          />
          <View className={styles.recordItem__right}>
            <View className={styles.recordItem__header}>
              <Text className={styles.recordItem__title}>{record.title}</Text>
              <Text>{record.mood}</Text>
              {/* <AtIcon value={isExercise ? 'check' : 'clock'} size='16' color={isExercise ? '#52c41a' : '#333'} /> */}
            </View>
            <View className={styles.recordItem__content}>

              {record.content && (
                <Text className={styles.recordItem__description}>{record.content}</Text>
              )}

            </View>
            <View className={classNames(styles.recordItem__status, {
              [styles.exercise]: record.category === '1',
              [styles.diet]: record.category === '2',
            })}
            >
              {record.category === '1' ? (
                <Image src={exerIconUrl} className={styles.statusIcon} />
              ) : (
                <Image src={dietconUrl} className={styles.statusIcon} />
              )}
              {record.category === '1' ? '运动' : '饮食'}
            </View>


          </View>

        </View>

      </View>
    )
  }

  return (
    <ScrollView scrollY scrollWithAnimation className={styles.recordList} scrollAnchoring
      refresherEnabled>
      <View className={styles.recordWrapper}>
        {records.map(record => (
          <RecordItem key={record.id} record={record} />
        ))}
      </View>

      {records.length === 0 && (
        <View className={styles.recordList__empty}>
          <Text className={styles.recordList__emptyText}>今天还没有添加任何计划</Text>
        </View>
      )}
    </ScrollView>
  )
}
export default RecordList